﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeFile="Details.aspx.cs" Inherits="Details" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server">
    <link href="Styles/screen.css" rel="stylesheet" type="text/css" media="screen" /> 
    <style type="text/css">
        #overlay
        {
            z-index: 999;
	        filter: alpha(opacity=50); /*older IE*/
	        filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE */
	        -moz-opacity: .50; /*older Mozilla*/
	        -khtml-opacity: 0.5;   /*older Safari*/
	        opacity: 0.5;   /*supported by current Mozilla, Safari, and Opera*/
	        background-color:#000000;
	        position:fixed; top:0px; left:0px; width:100%; height:100%; text-align:center; vertical-align:middle;
        }
    </style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script type="text/javascript">
        function Get_Img(img) {
            document.getElementById("<%=imgLightBox.ClientID %>").src = img;
            document.getElementById("<%=imgLightBox.ClientID %>").focus();
            document.getElementById("overlay").style.display = "block";
            document.getElementById("lightbox").style.display = "block";
        }
        function closeImg() {
            document.getElementById("overlay").style.display = "none";
            document.getElementById("lightbox").style.display = "none";
        }
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">

    <asp:SqlDataSource ID="sdsDB" 
        ConnectionString="<%$ connectionStrings: AccessConnectionDB %>" 
        ProviderName="<%$ connectionStrings:AccessConnectionDB.ProviderName %>"
        runat="server" />

    <asp:FormView ID="fvDisplay" DataSourceID="sdsDB" runat="server">
        <ItemTemplate>
            <asp:Label ID="Label4" Text="Product Details" Font-Size="XX-Large" Font-Bold="true" Runat="Server" ForeColor="#990000"/>            
            <table width="400px">
            <tr>
                <td>
                    <img id="imgProduct" src='<%#Eval("PD_IMG") %>' width="200" height="200" alt='<%#Eval("PD_NAME")%>' onclick="Get_Img(src);return false;" runat="server" />
                </td>
                <td>
                    <asp:Label ID="lblPDName" Font-Size="Large" ForeColor="Maroon" Text='<%#Eval("PD_NAME") %>' runat="server"></asp:Label><br />
                    <asp:Label Font-Size="Smaller" runat="server">ID #</asp:Label>
                    <asp:Label ID="lblPDID" Font-Size="Smaller" Text='<%#Eval("PD_ID") %>' runat="server"></asp:Label><br />
                    <asp:Label ID="lblPDPrice" Font-Bold="true" Text='<%# String.Format("{0:C}", Eval("PD_PRICE")) %>' runat="server"></asp:Label><br /><br />
                    <asp:Label ID="lblPDDesc" Text='<%#Eval("PD_DESCR") %>' runat="server"></asp:Label><br /><br />
                    <asp:Button ID="btnAddCart" Text="Add to Cart" OnClick="btnClick_addToCart" runat="server" /><br />
                </td>
            </tr>
            </table>
        </ItemTemplate>
    </asp:FormView>
    
<div id="lightbox" style="display:none; position:fixed; z-index:1000; top:25%; left:25%; height:430px; width:400px; background:white; border:1px solid black">
    <button id="imgLBClose" onclick="closeImg(); return false;" title="Close" >Close</button>
    <img ID="imgLightBox" src="" width="400" height="400" runat="server" alt="test" /><br />
</div>
<div id="overlay" style="display:none" >
</div>
</asp:Content>

